昨天我們有稍微提到，使用 $event 的 property 時，要注意大小寫的問題，雖然只是輕輕帶過，但是以往有寫過 JavaScript 的開發者，肯定有遇到過打錯字（or 打錯大小寫）導致程式出錯的經驗，這不僅困擾，而且很不容易解決。

這也間接帶出了 Angular 開發的優點，開發 Angular 使用的是 TypeScript，用白話一點講 TypeScript 是 JavaScript 的超集合，因此 TypeScript 就是 JavaScript，而且，還是具有型別的 JavaScript！

我們很久沒提到 TypeScript 了，如果感到有點陌生，可以回去參考 Day 07：開發 Angular 一定要會的 TypeScript 哦！

那具有型別有什麼好處呢？好處很多，也時常有人在讚揚，不過，我們還是直接示範，會比較清楚！

從前一篇的文章，我們可以知道 $event 傳入的型別是 PointerEvent。

那我們就可以到 AppComponent 中為 $event 加上型別啦！

昨天我們為了示範，其實已經有為 $event 加上一個 any 的型別，但使用 any 則完全捨棄了型別的優點，有加跟沒加一樣，因此開發時還是建議盡可能不要使用 any 型別哦！

而加上型別的好處，就是當我們想要運用 $event 的 property 時，就有好用的 intellisense 來當我們開發的最佳助攻啦！

當我們以為一切順利時，在 HTML 卻噴出錯誤。

雖然型別是 PointerEvent，錯誤訊息卻顯示 $event 這個參數是屬於 MouseEvent 型別，無法指派 PointerEvent 型別，因此，在這裡我們要改成使用 MouseEvent 才能正確運作。

PointerEvent 的 porperties 是繼承自 MouseEvent，可以參考 MDN 的說明：PointerEvent

當然，好用的 intellisense 依然正常發揮，這個不怕打錯字的好處，當然就可以大大改善開發效率囉！

來到網頁，按著 shift 鍵並點擊 img，我們可以得到與昨天相同的結果。

這裡，我們還有另一種寫法，我們可以再來重構一下！首先，先把 AppComponent 裡的 $event.shiftKey 剪下。

到 HTML Template 的地方把 $event 取代。

此時，AppComponent 中的程式碼，型別就要更改，從 HTML 的錯誤提示來看，我們可以知道 $event.shiftKey 的型別是 boolean。

所以我們需要把 AppComponent 中的程式碼改成如下：

上圖最後一行的 console.log 就可以拿掉了，以免產生錯誤。

再次回到網頁，進行同樣的操作，標題仍然會改變！

而這兩種寫法，無法說誰好誰壞，第一種寫法，傳入整個 $event，在操作上保有更多彈性，而第二種寫法，不傳入 $event 只傳入 boolean 值，顯得更簡單易讀，各有優缺點，端看開發的需求為何。

以上，就是關於型別優點的簡單分享，我們下一篇再見！